<template>
  <transition name="slide" appear>
    <music-list :title="album.name" :bgImage="album.avatar" :songs="songs"> </music-list>
  </transition>
</template>
<script>
import musicList from 'components/music-list/music-list';
import { mapGetters } from 'vuex';
import { getSongUrl, getSongDetail } from 'api/song';
import { createSong, songAddUrl } from 'common/js/song';
import { getAlbumDetail } from 'api/recommend';

export default {
  computed: {
    ...mapGetters(['album']),
  },
  data() {
    return {
      songs: [],
      songids: [],
      bugSongs: [],
    };
  },
  created() {
    this._getAlbumDetail(this.album.id);
  },
  methods: {
    // 歌单详情页 只能获取到歌曲的id
    async _getAlbumDetail(id) {
      if (!id) {
        this.$router.push('/recommend');
        return;
      }
      await getAlbumDetail(id).then((res) => {
        this.songids = res.playlist.trackIds.map((item) => item.id);
      });
      // 拿 ids多请求一次
      await getSongDetail(this.songids.join(',')).then((res) => {
        this.bugSongs = this._normalizeSongs(res.songs);
      });
      await getSongUrl(this.songids.join(',')).then((res) => {
        this._songAddUrl(res.data);
      });
    },
    _normalizeSongs(songs) {
      let res = [];
      songs.forEach((item) => {
        if (item.id && item.al && item.al.id) {
          res.push(createSong(item));
        }
      });
      return res;
    },
    _songAddUrl(urls) {
      this.songs = this.bugSongs.map((song) => {
        songAddUrl(song, urls);
        return song;
      });
    },
  },
  components: {
    musicList,
  },
};
</script>
<style scoped lang="stylus">
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}
.slide-enter, .slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>
